<template>
  <content-box>
    <div class="box-title" slot="header" style="width: 100%;">
      <el-form :model="searchFrom" class="form-inline header-search">
        <!-- 日期范围 -->
        <el-date-picker size="small" v-model="searchFrom.searchDate" type="datetimerange" range-separator="至" 
        start-placeholder="开始日期" end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']">
        </el-date-picker>

        <!-- 搜索 -->
        <el-input size="small" placeholder="输入用户名称" v-model="searchFrom.searchKey" @keyup.enter.native="search($event)">
        </el-input>

        <!-- 搜索按钮 -->
        <el-button size="small" type="primary" icon="el-icon-search" @click="search($event)">{{$t('btns.search')}}</el-button>
      </el-form>
    </div>

    <div slot="body">
      <el-table :data="tableData.rows" size="mini" border v-loading="listLoading" :height="tableFull(210)">
        <el-table-column
          prop="nickname"
          label="昵称">
        </el-table-column>

        <el-table-column
          prop="username"
          label="账号">
        </el-table-column>

        <el-table-column
          prop="nickname"
          label="操作描述">
        </el-table-column>

        <el-table-column
          prop="nickname"
          label="设备">
        </el-table-column>

        <el-table-column
          prop="nickname"
          label="操作IP">
        </el-table-column>

        <el-table-column
          prop="nickname"
          label="浏览器">
        </el-table-column>

        <el-table-column
          prop="email"
          label="记录时间">
        </el-table-column>
        
        <el-table-column label="操作" width="80" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">{{$t('btns.delete')}}
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-pagination :class="{'border-pagination': true, 'pagination-right': true}"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="tableData.pagination.page"
        :page-sizes="pageList"
        :page-size="tableData.pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.pagination.total">
      </el-pagination>
    </div>
  </content-box>
</template>

<script>
  import { mapGetters } from 'vuex'
  import ContentBox from '@/views/layout/components/ContentBox'
  import { getLogList, logDel } from '@/api/user'

  export default {
    components: {
      ContentBox
    },
    computed: {
      ...mapGetters([
        'fullHeight',
        'pageList'
      ])
    },
    data() {
      return {
        // 搜索
        searchFrom: {
          searchDate: '',
          searchKey: ''
        },
        listLoading: false,
        tableData: {
          rows: [],
          pagination: {
            total: 0,
            page: 1,
            limit: 10,
            parentId: 0
          }
        }
      }
    },
    methods: {
      tableFull(full) {
        return this.z_fullNum(this.fullHeight, full)
      },
      handleSizeChange(val) {
        this.tableData.pagination.limit = val
        this.load()
      },
      handleCurrentChange(val) {
        this.tableData.pagination.page = val
        this.load()
      },
      // 删除
      handleDelete(index, row) {
        logDel({
          id: row.id
        }).then(res => {
          // 刷新
          this.load()
        })
      },
      search(e) {
        this.load()
      },
      // 加载数据
      load() {
        this.listLoading = true
        getLogList({
          searchKey: this.searchFrom.searchKey,
          searchDate: this.searchFrom.searchDate,
          limit: this.tableData.pagination.limit,
          page: this.tableData.pagination.page
        }).then(res => {
          this.tableData.rows = res.data.rows
          this.tableData.pagination.total = res.data.total
          this.listLoading = false
          console.log(res)
        })
      }
    },
    created() {
      // 初始化数据
      this.load()
    }
  }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
// 处理头部搜索
.header-search{
  .el-range-editor{
    width: 360px;
    padding-right: 0;
    padding-left: 0;
    .el-range-separator{
      width: auto;
    }
  }
}
</style>

<style rel="stylesheet/scss" lang="scss">

// 处理头部搜索
.header-search{
  .el-range-editor{
    .el-input__icon{
      margin-left: 0;
    }
  }
}

</style>